{% extends "base.html" %}
{% block title %}新增配置{% endblock %}
{% load staticfiles %}

{% block content %}


    <div class="admin-biaogelist" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">

        <div class="listbiaoti am-cf">
            <ul class="am-icon-flag on"> 配置编辑</ul>
            <dl class="am-icon-home" style="float: right;">当前位置： 用例管理 > <a href="#">新增配置</a></dl>
        </div>

        <div class="am-tabs am-margin">
            <ul class="am-tabs-nav am-nav am-nav-tabs" id="tab-test">
                <li><a href="javascript:;" data-target="#tab1">messages</a></li>
                <li><a href="javascript:;" data-target="#tab2">variables/parameters/hooks</a></li>
                <li><a href="javascript:;" data-target="#tab3">request</a></li>
            </ul>

            <div class="am-tabs-bd">
                <div class="am-tab-panel" id="tab1">
                    <form class="form-horizontal" id="form_config">
                        <div class="form-group">
                            <div class="input-group col-md-4 col-md-offset-1">
                                <div class="input-group-addon" style="color: #0a628f">配置名称</div>
                                <input type="text" class="form-control" id="config_name" name="config_name"
                                       placeholder="配置名称">
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="input-group col-md-4 col-md-offset-1">
                                <div class="input-group-addon" style="color: #0a628f">所属项目</div>
                                <select id='project' name="project" class="form-control"
                                        onchange="auto_load('#form_config', '/api/add_config/', '#belong_module_id', 'module')">
                                    <option value="请选择">请选择</option>
                                    {% for foo in project %}
                                        <option value="{{ foo.project_name }}">{{ foo.project_name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group col-md-4 col-md-offset-1">
                                <div class="input-group-addon" style="color: #0a628f">所属模块</div>
                                <select id="belong_module_id" name="module" class="form-control">
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="input-group col-md-4 col-md-offset-1">
                                <div class="input-group-addon" style="color: #0a628f">编写人员</div>
                                <input type="text" class="form-control" id="config_author" name="author"
                                       placeholder="创建者" value="{{ account }}">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="am-tab-panel" id="tab2">
                    <button class="btn btn-info" value="添 加" onclick="add_row('variables')">add variables</button>
                    <button class="btn btn-danger" value="删 除" onclick="del_row('variables')">del variables</button>
                    <button class="btn btn-info" value="添 加" onclick="add_params('params')">add param</button>
                    <button class="btn btn-danger" value="删 除" onclick="del_row('params')">del param</button>
                    <button class="btn btn-info" value="添 加" onclick="add_row('hooks')">add hooks</button>
                    <button class="btn btn-danger" value="删 除" onclick="del_row('hooks')">del hooks</button>
                    <form id="config_variables">
                        <table class="table table-hover table-condensed table-bordered table-striped" id="variables">
                            <caption>Variables:</caption>
                            <thead>
                            <tr class="active text-success">
                                <th width="5%" align="center">Option</th>
                                <th width="30%" align="center">Key</th>
                                <th width="8%" align="center">Type</th>
                                <th width="57%" align="center">Value</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </form>

                    <form id="config_params">
                        <table class="table table-hover table-condensed table-bordered table-striped" id="params">
                            <caption>parameters:</caption>
                            <thead>
                            <tr class="active text-success">
                                <th width="5%" align="center">Option</th>
                                <th width="20%" align="center">Key</th>
                                <th width="75%" align="center">Value</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </form>

                    <form id="config_hooks">
                        <table class="table table-hover table-condensed table-bordered table-striped" id="hooks">
                            <caption>hooks:</caption>
                            <thead>
                            <tr class="active text-success">
                                <th width="5%" align="center">Option</th>
                                <th width="47.5%" align="center">setup_hooks</th>
                                <th width="47.5%" align="center">teardown_hooks</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </form>
                </div>
                <div class="am-tab-panel" id="tab3">
                    <div class="form-inline">
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-addon">Type</div>
                                <select class="form-control" name="DataType" id="config_data_type">
                                    <option>data</option>
                                    <option>json</option>
                                    <option>params</option>
                                </select>
                            </div>
                        </div>

                        <button class="btn btn-info" value="添 加" id="add_data" onclick="add_row('data')">add data
                        </button>
                        <button class="btn btn-danger" value="删 除" id="del_data" onclick="del_row('data')">del data
                        </button>
                        <button class="btn btn-info" value="添 加" onclick="add_row('header')">add headers</button>
                        <button class="btn btn-danger" value="删 除" onclick="del_row('header')">del headers</button>
                        <form id="config_request_data">
                            <table class="table table-hover table-condensed table-bordered table-striped" id="data">
                                <caption>data:</caption>
                                <thead>
                                <tr class="active text-success">
                                    <th width="5%" align="center">Option</th>
                                    <th width="30%" align="center">Key</th>
                                    <th width="5%" align="center">Type</th>
                                    <th width="60%" align="center">Value</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </form>

                        <form id="config_request_headers">
                            <table class="table table-hover table-condensed table-bordered table-striped" id="header">
                                <caption>headers:</caption>
                                <thead>
                                <tr class="active text-success">
                                    <th width="5%" align="center">Option</th>
                                    <th width="40%" align="center">Key</th>
                                    <th width="55%" align="center">Value</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </form>
                    </div>
                </div>
            </div>

        </div>

        <div class="am-form-group am-cf">
            <div class="you" style="margin-left: 11%;">
                <button type="button" class="am-btn am-btn-success am-radius" onclick="config_ajax('add', editor)">点 击 提
                    交
                </button>&nbsp;
                &raquo; &nbsp;
                <a type="submit" href="/api/add_case/" class="am-btn am-btn-secondary am-radius">新 增 用 例</a>

            </div>
        </div>
    </div>

    <script>
        editor = null;
        $('#config_data_type').on('change', function () {
            if ($('#config_data_type').val() === 'json') {
                $('#add_data').attr('disabled', true);
                $('#del_data').attr('disabled', true);
                $('#data').remove();
                var json_text = "<span style=\"font-size:10px;\" id=\"json-text\">\n" +
                    " <div style=\"margin-left: 0px; margin-top: 5px; height: 200px\">"+
                    "<pre id=\"code\" class=\"ace_editor\" style=\"margin-top: 0px; margin-bottom: 0px; min-height: 200px;\">\n" +
                    "<textarea>\n" +
                    "{\"key\":\"value\"}\n" +
                    "</textarea>\n" +
                    "</pre></div></span>";
                $('#config_request_data').append(json_text);
                 editor = ace.edit("code");
                init_acs('json', 'github', editor);

            } else {
                var table = '<table class="table table-hover table-condensed table-bordered table-striped" id="data">\n' +
                    '                                <caption>' + $('#config_data_type').val() + ':</caption>\n' +
                    '                                <thead>\n' +
                    '                                <tr class="active text-success">\n' +
                    '                                    <th width="5%" align="center">Option</th>\n' +
                    '                                    <th width="30%" align="center">Key</th>\n' +
                    '                                    <th width="5%" align="center">Type</th>\n' +
                    '                                    <th width="60%" align="center">Value</th>\n' +
                    '                                </tr>\n' +
                    '                                </thead>\n' +
                    '                                <tbody>\n' +
                    '                                </tbody>\n' +
                    '                            </table>';

                $('#add_data').text('add ' + $('#config_data_type').val());
                $('#del_data').text('del ' + $('#config_data_type').val());

                $('#add_data').removeAttr("disabled");
                $('#del_data').removeAttr("disabled");
                $('#data').remove();
                $('#json-text').remove();
                $('#config_request_data').append(table);
            }
        });


        $("#tab-test").on("click", "li", function () {
            $(this).addClass("am-active").siblings("li").removeClass("am-active");
            var target = $(this).children("a").attr("data-target");
            $(target).addClass("am-active").siblings(".am-tab-panel").removeClass("am-active");
        }).find("li").eq(0).trigger("click");
    </script>
{% endblock %}